<template>
  <div id="app">
    <h2 id="h2">基本使用</h2>
    <button id="btn1" @click="axiosGet">发送GET请求</button>
    <button id="btn2" @click="axiosPost">发送POST请求</button>
    <button id="btn3" @click="axiosPut">发送PUT请求</button>
    <button id="btn4" @click="axiosDelete">发送DELETE请求</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'App',
  methods:{
    //GET请求（获取数据）
    axiosGet:function(){
      axios({
        //请求类型
        method:"GET",
        //URL 关注链接（alt+单击)
        url:"http://localhost:3000/posts/2",
      }).then(
        response=>{
          console.log("response",response.data);
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
    //POST请求（添加一篇新的文章）
    //执行该操作后，会在源文件db.json增加一块新的数据
    axiosPost:function(){
      axios({
        //请求类型
        method:"POST",
        //URL 关注链接（alt+单击)
        url:"http://localhost:3000/posts",
        //设置请求体
        data:{
          title:"今天天气不错，还风和日丽的",
          author:"张三",
        }
      }).then(
        response=>{
          console.log("response",response.data);
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
    //PUT请求（更新数据）
    axiosPut:function(){
      axios({
        //请求类型
        method:"PUT",
        //URL 关注链接（alt+单击)
        //需要明确在URL指出就改的是哪部分数据
        url:"http://localhost:3000/posts/3",
        //设置请求体
        data:{
          title:"今天天气不错，还风和日丽的",
          author:"李四",
        }
      }).then(
        response=>{
          console.log("response",response.data);
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
    //delete请求（删除数据）
    axiosDelete:function(){
      axios({
        //请求类型
        method:"delete",
        //URL 关注链接（alt+单击)
        //需要删除的目标
        url:"http://localhost:3000/posts/3",
      }).then(
        response=>{
          console.log("response",response.data);
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
  },
}
</script>

<style>
  button{
    margin-left: 5px;
  }
  #btn1{
    background-color: skyblue;
  }
  #btn2{
    background-color: orange;
  }
  #btn3{
    background-color: green;
  }
  #btn4{
    background-color: red;
  }
</style>
